<!-- productGrouping 商品分组-->
<template>
  <div class="content">
    <div class="content-btn">
      <Cbutton @click="handleAdd">新建商品分组</Cbutton>
    </div>
    <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit>
      <el-table-column type="index" label="序号" align="center" width="70"></el-table-column>
      <el-table-column prop="groupName" label="商品分组" align="center"></el-table-column>

      <el-table-column prop="addTime" label="创建时间" align="center">
        <template slot-scope="scope">{{scope.row.addTime | glbTimeFormat}}</template>
      </el-table-column>
      <el-table-column prop="showStatus" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state === 1" type="success">已启用</el-tag>
          <el-tag v-else type="danger">已停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="count" label="商品数" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="medium" @click="handleOpenGoods(scope.row)">{{scope.row.count}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="groupSort" label="商品分组排序" align="center"></el-table-column>
      <el-table-column label="操作" fixed="right" align="center">
        <template slot-scope="scope">
          <!-- <el-button type="text" size="medium" @click="handleEdit(scope.row)">修改</el-button> -->
          <el-button v-if="scope.row.state === 1" type="text" size="medium" style="color: #F56C6C" @click="handleEnable(scope.row, 2)">停用</el-button>
          <el-button v-else type="text" size="medium" @click="handleEnable(scope.row, 1)">启用</el-button>
          <el-button type="text" size="medium" style="color: #F56C6C" @click="handleRemove(scope.row)">删除</el-button>
          <!-- <el-button type="text" size="medium" @click="handleEdit(scope.row)">添加商品</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <Pagination @pageChange="getPage" :pageDefultData="{
        pageNum: query.pageNum,
        pageRow: query.pageSize,
        totalCount: totalCount }">
    </Pagination>

    <el-dialog :title="groupDialog.title" :visible.sync="groupDialog.mVisible" width="600px">
      <el-form :model="groupDialog.data" :rules="groupDialog.rules" ref="groupDialogForm" size="medium" label-width="120px">
        <el-form-item label="分组名称：" prop="groupName">
          <el-input v-model="groupDialog.data.groupName" placeholder="请输入分组名称"></el-input>
        </el-form-item>
        <el-form-item label="分组排序：" prop="groupSort">
          <el-input v-model="groupDialog.data.groupSort" placeholder="请输入分组排序"></el-input>
        </el-form-item>
        <el-form-item label="分组状态：" prop="state">
          <el-radio-group v-model="groupDialog.data.state">
            <el-radio :label="'1'">是</el-radio>
            <el-radio :label="'0'">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleCancle('groupDialogForm')">取 消</el-button>
        <el-button size="medium" :loading="groupDialog.btnLoading" type="primary" @click="handleDiaSub('groupDialogForm')">确
          定</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="dialog.title" :visible.sync="dialog.mVisible" width="1000px">
      <div class="content-btn">
        <el-button type="primary" @click="handleBatchRemove">批量删除</el-button>
      </div>
      <el-table :data="dialog.tableList" v-loading="dialog.tableLoading" ref="integrateTableData" border fit stripe
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <el-table-column prop="name" label="商品" align="center" min-width="160">
          <template slot-scope="props">
            <div class="product">
              <div class="product-img">
                <!-- <img :src="props.row.pic" alt=""> -->
                <el-image class="product-img-small" :src="props.row.pic"></el-image>
              </div>
              <div class="product-word">
                <span>{{props.row.name}}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" align="center"></el-table-column>
        <el-table-column prop="usePointLimit" label="积分价格" align="center"></el-table-column>
        <el-table-column prop="connteSort" label="排序" align="center">
          <template slot-scope="scope">
            <span class="click-ele" @click="handleEditSort(scope.row, 'connteSort', '排序')">{{scope.row.connteSort}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="添加时间" align="center" min-width="160">
          <template slot-scope="props">
            {{props.row.addTime | glbTimeFormat}}
          </template>
        </el-table-column>
        <el-table-column prop="publishStatus" label="状态" align="center">
          <!-- 上架状态：0->仓库中；1->上架；2->下架 -> 3已售罄 -->
          <template slot-scope="props">
            <el-tag v-if="props.row.publishStatus === 3" type="danger">已售罄</el-tag>
            <el-tag v-if="props.row.publishStatus === 2" type="warning">下架</el-tag>
            <el-tag v-if="props.row.publishStatus === 1" type="success">上架</el-tag>
            <el-tag v-if="props.row.publishStatus === 0" type="info">仓库中</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="库存" align="center"></el-table-column>
        <el-table-column prop="handleMan" label="操作" align="center">
          <template slot-scope="props">
            <span class="click-ele danger" @click="handleRemoveGoods(props.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <Pagination @pageChange="getPage2" :pageDefultData="{
        pageNum: dialog.pageNum,
        pageRow: dialog.pageSize,
        totalCount: dialog.totalCount }">
      </Pagination>
    </el-dialog>

  </div>
</template>

<script>
import { GetProductGroupingList, AddProductGroup, RemoveProductGroup, GetProductGroupingGoodsList, DeleteProductGroupingGoods, ProductSortEdit, ProductGroupEnable } from '@/api/onlineMan'
import { productGroupRules } from '@/utils/rules'
export default {
  name: 'productGrouping',
  components: {},
  data () {
    return {
      query: {
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableLoading: false,

      groupDialog: {
        title: '',
        mVisible: false,
        btnLoading: false,
        oprType: 'ADD',
        data: {
          groupName: '',
          groupSort: '',
          state: '1'
        },
        rules: productGroupRules
      },

      dialog: {
        title: '',
        mVisible: false,
        loading: false,
        oprType: 'ADD',
        tableList: [],
        selection: [],
        tableLoading: false,
        groupId: '',
        pageNum: 1,
        pageSize: 10,
        totalCount: 0
      }
    }
  },
  props: {},
  watch: {},
  computed: {},
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.tableLoading = true
      let params = JSON.parse(JSON.stringify(this.query))
      GetProductGroupingList(params).then(res => {
        const data = res.data
        this.tableList = data.list
        this.totalCount = data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleOpenGoods (row) {
      this.dialog.mVisible = true
      this.dialog.groupId = row.id
      this.dialog.title = row.groupName
      this.getProudct()
    },
    getProudct () {
      const parmas = {
        groupId: this.dialog.groupId,
        pageNum: this.dialog.pageNum,
        pageSize: this.dialog.pageSize
      }
      this.dialog.tableLoading = true
      GetProductGroupingGoodsList(parmas).then(res => {
        const data = res.data
        this.dialog.tableLoading = false
        this.dialog.tableList = data.list || []
        this.dialog.totalCount = data.total
      }).catch(e => {
        this.dialog.tableLoading = false
      })
    },
    handleSelectionChange (selection) {
      this.dialog.selection = selection
    },
    handleEditSort (row, type) {
      let inputPatternReg = /^([1-9]\d*|[0]{1,1})$/
      let inputErrorMessage = '格式不正确'
      this.$prompt('', '修改排序', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: row[type] ? row[type].toString() : '0',
        inputPattern: inputPatternReg,
        inputErrorMessage: inputErrorMessage
      }).then(({ value }) => {
        let params = {
          groupId: row.groupId,
          productId: row.productId,
          sort: value
        }
        ProductSortEdit(params).then(res => {
          this.getProudct()
          this.getList()
        }).catch(e => { })
      }).catch(() => { })
    },
    handleEdit (row) {

    },
    handleAdd () {
      this.groupDialog.mVisible = true
      this.groupDialog.oprType = 'ADD'
      this.groupDialog.title = '新建商品分组'
    },
    handleCancle (formName) {
      this.$refs[formName].resetFields()
      this.groupDialog.mVisible = false
    },
    handleDiaSub (formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) return false
        this.groupDialog.btnLoading = true
        if (this.groupDialog.oprType === 'ADD') {
          const parmas = JSON.parse(JSON.stringify(this.groupDialog.data))
          AddProductGroup(parmas).then(res => {
            this.getList()
            this.groupDialog.mVisible = false
            this.$message.success(res.message || '新建成功')
          }).catch(e => {
            this.groupDialog.mVisible = false
          })
        }
        if (this.groupDialog.oprType === 'EDIT') {

        }
      })
    },
    handleEnable (row, type) {
      let tips = '启用'
      // groupId (integer, optional): 商品分组ID ,
      // state (integer, optional): 分组状态（1、已启用，2、已停用）
      let params = {
        groupId: row.id,
        state: 1
      }
      if (type === 1) {
        params.state = 1
        tips = '启用'
      } else {
        params.state = 2
        tips = '停用'
      }
      this.$confirm(`确定要${tips}该商品分组吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ProductGroupEnable(params).then(res => {
          this.getList()
          this.$message.success(res.message || '操作成功')
        }).catch(e => { })
      }).catch(e => {

      })
    },
    handleRemove (row) {
      this.$confirm(`确定要删除该商品分组吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        RemoveProductGroup({ ids: [row.id] }).then(res => {
          this.getList()
          this.$message.success(res.message || '删除成功')
        }).catch(() => { })
      }).catch(() => { })
    },
    handleBatchRemove () {
      if (this.dialog.selection.length <= 0) {
        this.$message.warning('请选择需要删除的商品')
      } else {
        const productIds = this.dialog.selection.map(item => item.productId)
        const parmas = {
          groupId: this.dialog.groupId,
          productIds: productIds
        }

        this.$confirm(`确定要删除这些商品吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          DeleteProductGroupingGoods(parmas).then(res => {
            this.getProudct()
            this.getList()
            this.$message.success(res.message || '操作成功')
          }).catch(() => { })
        }).catch(e => { })
      }
    },
    handleRemoveGoods (row) {
      this.$confirm(`确定要删除该商品吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const parmas = {
          groupId: row.groupId,
          productIds: [row.productId]
        }
        DeleteProductGroupingGoods(parmas).then(res => {
          this.getProudct()
          this.getList()
          this.$message.success(res.message || '操作成功')
        }).catch(() => { })
      }).catch(() => { })
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    },
    getPage2 (val) {
      this.dialog.pageNum = val.pageNum
      this.dialog.pageSize = val.pageRow
      this.getProudct()
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
